<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  <el-tab-pane label="任务检查" name="first">
  <div class="app-container">
    <el-form :model="taskContentDetail" ref="taskContentDetail" :inline="true" label-width="68px">
      <el-row :gutter="24">
        <el-col :span="6">
      <el-form-item label="当前企业" prop="stationName">
        <el-input
          v-model="taskContentDetail.stationName"
          :readonly="true"
          size="small"
          width="400px"
          :title="taskContentDetail.stationName"
        />
      </el-form-item>
        </el-col>
        <el-col :span="12">
      <el-form-item label="当前位置" prop="locationAddress">
        <el-input
          v-model="taskContentDetail.locationAddress?taskContentDetail.locationAddress:taskContentDetail.address"
          placeholder="请输入当前位置"
          clearable
          :readonly="readOnlyFlag"
          :show-overflow-tooltip='true'
          :title="taskContentDetail.locationAddress?taskContentDetail.locationAddress:taskContentDetail.address"
          size="small"
        />
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--双随机或周期任务-->
    <el-table class="el-table-check" v-if="taskContentDetail.taskType!='3'" v-loading="loading" :data="taskContentDetail.checkItems" >
      <el-table-column label="序号" align="left" prop="serialNumber" width="75" />
      <el-table-column label="事项名称" align="left" prop="itemName" width="120" />
      <el-table-column label="法律依据" align="center" prop="legalBasis" width="210" :show-overflow-tooltip='true' />
      <el-table-column label="检查内容" align="center" prop="checkContent" width="210" :show-overflow-tooltip='true'/>
      <el-table-column label="是否符合要求" align="left" prop="checkResult" >
        <template slot-scope="scope">
        <el-radio v-model="scope.row.checkResult"  :disabled="readOnlyFlag" label="1">合格</el-radio>
        <el-radio v-model="scope.row.checkResult" :disabled="readOnlyFlag"  label="2">不合格</el-radio>
      </template>
      </el-table-column>
      <el-table-column label="备注" align ="left" width="210" prop="remark">
        <template slot-scope="scope">
        <el-input class="remarkText" v-model="scope.row.remark" type="textarea" placeholder="请输入内容"  :readonly="readOnlyFlag"  maxlength="100" show-word-limit/>
        </template>
      </el-table-column>
      <el-table-column label="上传图片" width ="500" align="center" :readonly="readOnlyFlag" >
        <template slot-scope="scope">
          <el-upload
            :headers="upload.headers"
            :action="upload.url"
            :file-list="scope.row.imageList"
            list-type="picture-card"
            :on-exceed="exceedFile"
            :limit="upload.limit"
            :on-remove="function(file,fileList){return handleRemove(file,fileList,scope.row)}"
            :before-upload="function(file){return beforeImageUpload(file,scope.row)}"
            :on-preview="handlePictureCardPreview"
            :on-success="function (res,file,fileList){return handlePictureSuccess(res,file,fileList,scope.row)}"

            :disabled="readOnlyFlag"
          >
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="taskContentDetail.taskType!='3'">
      <el-form>
        <el-row :gutter="24">
          <el-col :span="12" style="height:100px;display:flex;justify-content: flex-start;align-items: center">

            <sign-dialog
              :visible.sync="userSignFlag"
              @uploadImg="handleUserSign"
              @dialogClose="handleDialogClose"
            ></sign-dialog>
            <el-button
              type="primary"
              @click="handleUserSignFlag"
              icon="el-icon-edit"
              size="small"
              :disabled="readOnlyFlag"
            >检查人签名</el-button
            >
            <template
              v-if="taskContentDetail.checkUserSign != null && taskContentDetail.checkUserSign != undefined"
            >
              <img :src="taskContentDetail.checkUserSign" width="100" height="100" />
            </template>
          </el-col>
          <el-col :span="12" style="height:100px;display:flex;justify-content: flex-start;align-items: center">

            <sign-dialog
              :visible.sync="reviewSignFlag"
              @uploadImg="handleReviewSign"
              @dialogClose="handleDialogClose"
            ></sign-dialog>

            <el-button
              type="primary"
              @click="handleReviewSignFlag"
              icon="el-icon-edit"
              size="small"
              :disabled="readOnlyFlag"
            >被检查人签名</el-button
            >

            <template
              v-if="taskContentDetail.reviewUserSign != null && taskContentDetail.reviewUserSign != undefined"
            >
              <img :src="taskContentDetail.reviewUserSign" width="100" height="100" />
            </template>

          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--特定任务-->
    <el-form v-if="taskContentDetail.taskType=='3'" :model="taskContentDetail">
      <el-row :gutter="24">
        <el-col :span="5">
          <el-form-item label="任务周期" prop="startDate">
            <el-date-picker clearable size="small" style="width: 200px"
                            v-model="taskContentDetail.startDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :readonly="true"
                            placeholder="选择开始时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="至" prop="endDate">
            <label slot="label">至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <el-date-picker clearable size="small" style="width: 200px"
                            v-model="taskContentDetail.endDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            :readonly="true"
                            placeholder="选择结束时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
      <el-form-item label="任务描述:">
        <el-input
          v-model="taskContentDetail.taskDescribe"
          type="textarea"
          width="400"
          height="200"
          rows="3"
          :readonly="true"
        >
        </el-input>
      </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="处理描述:">
            <el-input
              v-model="taskContentDetail.handleDescription"
              type="textarea"
              width="400"
              height="200"
              rows="6"
              :readonly="readOnlyFlag"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item class="uploadImgAndVedio" style="display:flex;" label="上传图片或者视频:">
              <template>
                <el-upload
                  :accept="'image/*,video/*'"
                  :headers="upload.headers"
                  :action="upload.url"
                  :file-list="specialUrlList"
                  list-type="picture-card"
                  :before-upload="beforeSpecialUpload"
                  :on-success="handleSpecialSuccess"
                  :on-exceed="exceedFile"
                  :limit="upload.limit"
                  :disabled="specialUploadFlag"
                  :on-progress="handleUploadProcess"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{file}">
                    <el-progress v-if="file.status!='success'" class="progressBox" type="circle"  :percentage="file.percentage"></el-progress>
                     <video style="width:75px;height:75px;"
                     v-show="file.status=='success'"
                     v-if="file.url.indexOf('.mp3')!= -1||file.url.indexOf('.mp4')!= -1||file.url.indexOf('.m2v')!= -1||file.url.indexOf('.mkv')!= -1||file.url.indexOf('.wav')!= -1||file.url.indexOf('.wmv')!= -1"  :src="file.url"></video>
                     <img v-else v-show="file.status=='success'"
                        class="el-upload-list__item-thumbnail"
                        :src="file.url" alt=""
                      >   <!-- '.mp3','.mp4','.m2v','.mkv','.wav','.wmv' -->
                     <a class="el-upload-list__item-name"><i class="el-icon-document"></i></a>
        <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
                      <span class="el-upload-list__item-actions">

                        <span
                          class="el-upload-list__item-preview"
                          @click="handlePictureCardPreview(file)"
                        >
                          <i class="el-icon-zoom-in"></i>
                        </span>

                        <span
                          v-if="!readOnlyFlag"
                          class="el-upload-list__item-delete"
                          @click="handleSpecialRemove(file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>

                </el-upload>
              </template>
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>
    <el-dialog :visible.sync="dialogVisible">
      <video controls width="100%" v-if="dialogImageUrl.indexOf('.mp3')!= -1||dialogImageUrl.indexOf('.mp4')!= -1||dialogImageUrl.indexOf('.m2v')!= -1||dialogImageUrl.indexOf('.mkv')!= -1||dialogImageUrl.indexOf('.wav')!= -1||dialogImageUrl.indexOf('.wmv')!= -1"  :src="dialogImageUrl"></video>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <br/><br/>
    <div slot="footer" align="center" v-if="!readOnlyFlag" class="submit-footer">
      <el-button type="primary"  @click="handleSubmit">提 交</el-button>
      <!--<el-button @click="">清 空</el-button>-->
    </div>
  </div>
  </el-tab-pane>
  <el-tab-pane label="检查结果" name="second">
    <template>
      <el-form class="checkResultForm" :model="taskContentDetail" label-width="100px" border="true">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="单位:" prop="stationName">
              <el-input
                v-model="taskContentDetail.stationName"
                :readonly="true"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地点:" prop="locationAddress">
              <el-input
                v-model="taskContentDetail.locationAddress"
                :readonly="true"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="内容:">
              <el-input
                v-model="content"
                type="textarea"
                width="400"
                height="200"
                rows="5"
                :readonly="true"
                :show-overflow-tooltip='true'
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="问题:">
              <el-input
                v-model="problem"
                type="textarea"
                rows="5"
                width="400"
                height="200"
                :readonly="true"
                :show-overflow-tooltip='true'
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" v-if="taskContentDetail.taskType!='3'">
          <el-col :span="12">
            <el-form-item  label="检查人签名:" prop="checkUserSign">
              <el-image style="width:100px;height:100px"
                        :src="taskContentDetail.checkUserSign"
              :fit="fit"></el-image>
            </el-form-item>
          </el-col>
            <el-col :span="12">
            <el-form-item label="被检查人签名:" prop="reviewUserSign">
              <el-image style="width:100px;height:100px"
                        :src="taskContentDetail.reviewUserSign"
                        :fit="fit"></el-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </template>

  </el-tab-pane>

  </el-tabs>
</template>

<script>
  import { getCheckData,submitCheckData } from "@/api/task/check";
  import { getToken } from "@/utils/auth";
  import {getUserId} from "@/api/task/information";
  import signDialog from "../../components/signDialog";
  export default {
    name: "Station",
    data() {
      return {
          rounterTaskViewId:undefined,
          activeName:'first',
          taskContentDetail:{},
          dialogImageUrl: '',
          dialogVisible: false,
          //上传进度
          videoUploadPercent:undefined,
          upload:{
              headers: { Authorization: "Bearer " + getToken() },
              url: process.env.VUE_APP_BASE_API + "/common/upload",
              limit: 3,
          },
          isSign: false,
          signSrc:'',
          userSignFlag:false,
          reviewSignFlag:false,
          content:"",
          problem:"",
          fit:"fill",
          specialImageList:[],
          specialVedioList:[],
          specialUrlList:[],
          memberUserId:undefined,
          readOnlyFlag:true,
          //上传禁用标识 true-可以上传
          specialUploadFlag: true,
          //视频格式
          vedioFormatStr:['.mp3','.mp4','.m2v','.mkv','.wav','.wmv'],
          //图片格式
          pictureFormatStr:['.png','.jpg','.jpeg','.bmp','.gif'],
          percentage:0,//进度条
          showPercentage:false,

        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 场站信息表格数据
        stationList: [],
        // 台账信息表格数据
        ledgerList: [],
        tableHeight: window.innerHeight - 275,
        // 弹出层标题
        title: "",
        //字典-是否是
        dict_allPermissions: [],
        // 管辖单位
        jurisdictionUnitData: [],
        //所属单位
        townData: [],

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          stationName: undefined,
          stationCode: undefined,
          areaCode: undefined
        }
      };
    },
    created() {
        let taskViewId = this.$route.query.taskViewId;
        this.rounterTaskViewId = taskViewId;
        if(taskViewId !=null && taskViewId !=undefined){
            this.getList(taskViewId);
        }
    },
      components:{signDialog},

    methods: {
      /** 查询场站信息列表 */
      getList(taskViewId) {
        this.loading = true;
          getCheckData(taskViewId).then(response => {
          this.taskContentDetail = response.data;
          if(this.taskContentDetail.checkItems){
              this.taskContentDetail.checkItems.forEach(response=>{
                  var urlList = [];
                  if(response.checkPath && response.checkPath!=''){
                      urlList = response.checkPath.split(",");
                  }
                  response.imageList = [];
                  urlList.forEach(detail => {
                      response.imageList.push({name:detail,url:detail});
                  })

              })

          }
          //当进入时，非指定人进入置为readonly
              getUserId().then(response => {
                  this.memberUserId = response.data;
                  if(this.memberUserId  == this.taskContentDetail.checkUserId && (this.taskContentDetail.status != '3' && this.taskContentDetail.status != '4')){
                      this.readOnlyFlag = false;
                      this.specialUploadFlag = false;
                  }
              });
          //当为特定任务时，处理url
          if(this.taskContentDetail.taskType && this.taskContentDetail.taskType == '3'){
              this.handleSpecialUrl();
          }
          this.loading = false;
        });
      },
        exceedFile(files, fileList) {
            let msg = `最多只能上传${this.upload.limit}个文件`;
            this.$message.warning(msg)
        },
        beforeImageUpload(file,row){
          if(file && file.name && file.name !=''){
              let count = 0;
              this.pictureFormatStr.forEach(detail => {
                  if(file.name.indexOf(detail)!= -1 ){
                      count++;
                  }
              })
              if(count != 1){
                  this.msgError('上传的文件不符合图片格式，请重新上传！')
                  return false
              }
          }
          const isLt2M = file.size / 1024 / 1024 < 10
          if (!isLt2M) {
              this.msgError('上传图片大小不能超过 10MB!')
              return false
          }
        },
        beforeSpecialUpload(file){
            if(file && file.name && file.name !=''){
                let countPicture = 0;
                let countVideo = 0;
                this.pictureFormatStr.forEach(detail => {
                    if(file.name.indexOf(detail)!= -1 ){
                        countPicture++;
                    }
                })
                this.vedioFormatStr.forEach(detail => {
                    if(file.name.indexOf(detail)!= -1 ){
                        countVideo++;
                    }
                })
                if((countPicture+countVideo )!= 1){
                    this.msgError('上传的文件不符合图片或视频格式，请重新上传！')
                    return false
                }
            }
         /* if(this.specialUrlList.length >=3){
              this.msgError('上传的图片或视频数量超过3个，请删除一个后再进行上传！')
              return false
          }*/
            const isLt2M = file.size / 1024 / 1024 < 100
            if (!isLt2M) {
                this.msgError('上传文件大小不能超过 100MB!')
                return false
            }
        },
        handleRemove(file,fileList,row) {
          console.log(row);
            row.imageList = [];
            fileList.forEach(detail => {
                row.imageList.push({name:detail.url,url:detail.url});
            })
        },
        handleSpecialRemove(file,fileList){
          let i = 0;
            this.specialUrlList.forEach(detail => {
              if(file.url == detail.url){
                  this.specialUrlList.splice(i,1);
              }
              i++;
          })

        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handlePictureSuccess(response, file,fileList,row){
          console.log("触发on-success事件")
            if(row.imageList === undefined ){
                row.imageList = [];
            }
            row.imageList.push({name:response.fileName,url:response.fileName});
        },

        handlePictureUrl(row){
          var imageList = [];
          var urlList = [];
          if(row.checkPath && row.checkPath!=''){
              urlList = row.checkPath.split(",");
          }
          if(urlList&& urlList !='' && urlList.length>0){
              urlList.forEach(detail => {
                  imageList.push({name:detail,url:detail});
              })
          }
          return imageList;
        },
        handleUploadProcess(event, file, fileList){
            // console.log(event)
            //  console.log(file)
            //  console.log(fileList)
            this.specialUploadFlag = true;
        },
        handleSpecialSuccess(response, file){
            this.specialUploadFlag = false;
            /* 1-图片 2-视频*/
            let fileType = '1';
            if(file && file.name && file.name !=''){
                let countPicture = 0;
                let countVideo = 0;
                this.pictureFormatStr.forEach(detail => {
                    if(file.name.indexOf(detail)!= -1 ){
                        countPicture++;
                    }
                })
                this.vedioFormatStr.forEach(detail => {
                    if(file.name.indexOf(detail)!= -1 ){
                        countVideo++;
                    }
                })
                if((countPicture+countVideo )!= 1){
                    this.msgError('上传的文件不符合图片或视频格式，请重新上传！')
                    return false
                }
                if(countPicture == 1 && countVideo == 0){
                    fileType = '1'
                }
                if(countPicture == 0 && countVideo == 1){
                    fileType = '2'
                }
            }
          this.specialUrlList.push({type:fileType,name:response.fileName,url:response.fileName});
        },

        handleSpecialUrl(){
            this.specialUrlList = [];
          if(this.taskContentDetail.uploadFiles && this.taskContentDetail.uploadFiles.length>0){
              this.taskContentDetail.uploadFiles.forEach(detail => {
                  this.specialUrlList.push({type:detail.fileType,name:detail.fileUrl,url:detail.fileUrl});
                  if(detail.fileType =='1'){
                      this.specialImageList.push({type:detail.fileType,name:detail.fileUrl,url:detail.fileUrl});
                  }else if(detail.fileType =='2'){
                      this.specialVedioList.push({type:detail.fileType,name:detail.fileUrl,url:detail.fileUrl});
                  }
              })
          }

        },
        handleClick(){
          this.content="";
          this.problem="";
          let i = 1;
          let j = 1;
          if(this.taskContentDetail && this.taskContentDetail.checkItems&&this.taskContentDetail.checkItems.length>0){
              this.taskContentDetail.checkItems.forEach(detail => {
                  this.content = this.content + i+'. '+detail.itemName+' \n ';
                  if(detail.checkResult =="2"){
                      this.problem =this.problem+ j+'. '+detail.itemName+' 不合格'+' \n ';
                      j++;
                  }
                  i++;
              })
          }

        },
        //提交前校验
        validateBeforeSubmit(){
          let chooseFlag = "Y";
          let pictureFlag = "Y";
            if(this.taskContentDetail.taskType == '3'){
                if(!this.taskContentDetail.handleDescription || this.taskContentDetail.handleDescription==''){
                    this.msgError("请填写处理描述！");
                    return false;
                }
            }
          if(this.taskContentDetail.taskType != '3' && (!this.taskContentDetail.locationAddress || this.taskContentDetail.locationAddress=='')){
              if(!this.taskContentDetail.address || this.taskContentDetail.address==''){
                  this.msgError("请填写地址！");
                  return false;
              }
              this.taskContentDetail.locationAddress = this.taskContentDetail.address;
          }
          if(this.taskContentDetail.taskType !='3'){
              if(!this.taskContentDetail.checkUserSign || this.taskContentDetail.checkUserSign =='' ){
                  this.msgError("请签检查人姓名！");
                  return false;
              }
              if(!this.taskContentDetail.reviewUserSign || this.taskContentDetail.reviewUserSign =='' ){
                  this.msgError("请签被检查人姓名！");
                  return false;
              }
              try{
                  this.taskContentDetail.checkItems.forEach(detail => {
                      if(!detail.checkResult || detail.checkResult ==''){
                          chooseFlag ="N";
                          throw new Error("has choose null");
                      }
               /*       if(!detail.checkPath || detail.checkPath ==''){
                          pictureFlag ="N";
                          throw new Error("has picture null");
                      }*/
                  });
              }catch(e){
                  if(e.message == "has choose null"){
                      this.msgError("存在检查项未选择，请注意！");
                      throw e;
                  }
                  /*else if(e.message == "has picture null"){
                      this.msgError("存在检查项未上传图片，请注意！");
                      throw e;
                  }*/
              }
          }
            if(chooseFlag =="N"){
                return false;
            }
            //对双随机或周期任务文件处理
            this.taskContentDetail.checkItems.forEach(detail => {
                let urlStr = "";
                detail.imageList.forEach(item => {
                    if(urlStr ==""){
                        urlStr = item.url;
                    }else{
                        urlStr = urlStr +','+item.url;
                    }
                });
                detail.checkPath = urlStr;
            });
            //当通过校验，对特定任务上传文件进行处理
            let index = 0;
            this.taskContentDetail.uploadFiles=[];
            this.specialUrlList.forEach(detail => {
                this.taskContentDetail.uploadFiles.push({fileUrl:detail.url,fileType:detail.type});
                index++;
            });
            return true;
        },
        handleSubmit(){
            if(this.validateBeforeSubmit()){
                submitCheckData(this.taskContentDetail).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess("提交成功");
                        this.getList(this.rounterTaskViewId);
                        // 调用全局挂载的方法,关闭当前标签页
                        this.$store.dispatch("tagsView/delView", this.$route);
                        // 返回上一步路由，返回上一个标签页
                        this.$router.go(-1);
/*
                        window.location.reload();
*/
                    }
                });
            }
        },
        handleUserSignFlag(){
          this.userSignFlag = true;
        },
        handleReviewSignFlag(){
            this.reviewSignFlag = true;
        },
        handleUserSign(data){
            this.taskContentDetail.checkUserSign = data;
            this.userSignFlag = false;
        },
        handleReviewSign(data){
            this.taskContentDetail.reviewUserSign = data;
            this.reviewSignFlag = false;
        },
        handleDialogClose(data){
          this.userSignFlag = data;
          this.reviewSignFlag = data;
        },

      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          stationName: undefined,
          stationCode: undefined,
          contacts: undefined,
          telephone: undefined,
          address: undefined,
          jurisdictionUnit: undefined,
          town: undefined,
          isAllPermissions: undefined,
          delFlag: undefined,
          createTime: undefined,
          createId: undefined,
          updateTime: undefined,
          updateId: undefined,
          remark: undefined,
          sealPath: '',
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
    }
  };
</script>
<style>
  .el-upload-list--picture-card{
     height:75px;
  }
  .el-upload-list--picture-card .el-upload-list__item{
    width:75px!important;
    height:75px!important;
  }
  .el-upload--picture-card{
    width:75px!important;
    height:75px!important;
    line-height:75px!important;
  }
  .el-upload-list__item{
    transition: none!important;
  }
  .el-table-check .cell div{
    display: flex;
    justify-content: center;
    align-items:center;
  }

  .remarkText{
    height: 75px;
    align-content: center;
  }
  .remarkText textarea{
    height:75px;
  }

  .checkResultForm{
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    width:90%;
    margin:0 auto;
    box-sizing:border-box;
  }
  .checkResultForm .el-row{
    margin:0!important;
  }
  .checkResultForm .el-col-12{
    padding:20px 20px 20px 0;
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
    box-sizing:border-box;
  }
  .checkResultForm .el-col-24{
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
    box-sizing:border-box;
    padding:20px 20px 20px 0;
  }
  .uploadImgAndVedio .el-form-item__content>div{
    display:flex;
  }
  .progressBox{
    width:75px!important;
    height:75px!important;
    position:relative;
    z-index:100
  }
  .progressBox .el-progress-circle{
    width:75px!important;
    height:75px!important;
    padding:5px;
  }
  .progressBox .el-progress__text{
    font-size:14px;
    display:none;

  }
</style>
